<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('推荐药新增')" />
</head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="post-form">
                <div class="select-list">
                    <ul>
                        <li>
                            商品码：<input type="text" name="goodscode" th:placeholder="商品码"/>
                        </li>
                        <!-- <li>
                             拼音码：<input type="text" name="plucode" th:placeholder="条码"/>
                         </li>-->
                        <li>
                            商品名称：<input type="text" name="goodsname" th:placeholder="商品名称"/>
                        </li>

                        <li>
                            药品类型：<select name="classname"  id="deviceType">
                            <option value="">---请选择---</option>
                            <option value="OTC呼吸系统">OTC呼吸系统</option>

                            <option value="OTC解热镇痛">OTC解热镇痛</option>

                            <option value="OTC其他类">OTC其他类</option>
                            <option value="OTC其他类（内）">OTC其他类（内）</option>
                            <option value="OTC清热解毒">OTC清热解毒</option>
                            <option value="OTC外用（串味）">OTC外用（串味）</option>
                            <option value="OTC外用药">OTC外用药</option>
                            <option value="OTC五官科">OTC五官科</option>
                            <option value="OTC消化系统">OTC消化系统</option>
                            <option value="参茸">参茸</option>
                            <option value="处方药">处方药</option>
                            <option value="含麻黄碱专柜">含麻黄碱专柜</option>
                            <option value="呼吸系统">呼吸系统</option>
                            <option value="解热镇痛">解热镇痛</option>
                            <option value="九珍堂">九珍堂</option>
                            <option value="日用百货">日用百货</option>
                            <option value="上虹">上虹</option>
                            <option value="食品">食品</option>
                            <option value="外用药">外用药</option>
                            <option value="维生素">维生素</option>
                            <option value="消化系统">消化系统</option>
                            <option value="心血管">心血管</option>
                            <option value="医疗器械">医疗器械</option>
                            <option value="原研药">原研药</option>

                        </select>
                        </li>

                        <!--                         suw 20210204  value 从1 改为 '' 不去除 维护表中已经存在数据-->
                        <li hidden>
                            <input id="flag3" name="flag3" value=""></input>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>

                        </li>
                    </ul>
                </div>
                <div class="select-list col-sm-3">
                    <li>
                        <a class="btn btn-success btn-rounded btn-sm " onclick=saveTemplate()><i class="fa"></i>保存模板</a>
                        <a class="btn btn-success btn-rounded btn-sm " onclick=resetTemplate()><i class="fa"></i>重置模板</a>
                        <a class="btn btn-success btn-rounded btn-sm " onclick=editTemplate()><i class="fa"></i>维护模板</a>
<!--                        <a class="btn btn-success btn-rounded btn-sm " onclick=addRalationShip(2)><i class="fa"></i>新增为关联</a>-->
                    </li>
                </div>
            </form>
        </div>


        <div class="">

        </div>
        <div class="select-table table-striped col-md-6 " style="width: 50%">
            <table id="bootstrap-table"></table>
        </div>

        <div class="col-sm-5 " style="padding-top: 20px;">

            <div class="row" style="margin-bottom: 20px;">
                <div class="col-sm-1" ></div>
                <div class="col-sm-9 select-list">
                    <div class="col-sm-12 search-collapse">
                        <ul>
                            <li >
                                模板名称：<input type="text" name="templateName" id="templateName" th:placeholder="请输入模板名称"/>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>

            <div class="row">



                <div class="col-sm-1" ><button class="glyphicon glyphicon-menu-right" style="margin-top: 80px;" onclick=tjButton()></button></div>
            <div class="col-sm-9">
<!--               <div class="col-sm-2">
                   <button class="btn-primary">新增为推荐</button>
               </div>-->


            <div class="ibox col-sm-12" >
                <div class="ibox-title">
                    <h5>推荐</h5>
                </div>
                <div class="ibox-content">

                    <div class=" select-table table-striped">
                        <table id="tj-table"></table>
                    </div>
                </div>
            </div>
             </div>


            </div>

            <div class="row">
                <div class="col-sm-1" ><button class="glyphicon glyphicon-menu-right "  style="margin-top: 80px" onclick="zhButton()"> </button></div>
                <div class="col-sm-9">
                    <!--               <div class="col-sm-2">
                                       <button class="btn-primary">新增为推荐</button>
                                   </div>-->


                    <div class="ibox col-sm-12" >
                        <div class="ibox-title">
                            <h5>组合</h5>
                        </div>
                        <div class="ibox-content">

                            <div class=" select-table table-striped">
                                <table id="zh-table"></table>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

<!--            style="float: none ; display: block; vertical-align: middle"-->

          <!--  <div class="col-sm-12">
&lt;!&ndash;                <div class="col-sm-2">
                    <button class="btn-primary">新增为组合</button>
                </div>&ndash;&gt;
                <div class="ibox col-sm-9" >
                    <div class="ibox-title">
                        <h5>组合</h5>
                    </div>
                    <div class="ibox-content">
                        <div class=" select-table table-striped">
                            <table id="zh-table"></table>
                        </div>
                    </div>
                </div>
            </div>-->

        </div>

    </div>
</div>
</div>


<th:block th:include="include :: footer" />

<script th:inline="javascript">
   // var ctx = [[@{/}]];
    //  var editFlag = [[${@permission.hasPermi('system:post:edit')}]];
    // var removeFlag = [[${@permission.hasPermi('system:post:remove')}]];
    var datas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "baodao/demo02";
    var prefix2 = ctx + "baodao/linktemplate";

    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add/{id}",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            /*  sortName: "companyId",*/
            modalName: "药品关系",
            singleSelect: true,  // 设置只能单选
            // 测试父子表
            detailView: false,

            columns: [{
                checkbox: true
            },
                {
                    field: 'goodscode',
                    title: '商品码'
                },
                {
                    field: 'goodsname',
                    title: '商品名称'
                },
                {
                    field: 'mfrs',
                    title: '生产厂商'
                },
                {
                    field: 'norm',
                    title: '规格'
                },
            ],
            onExpandRow: function (index, row, $detail) {
                //oInit.InitSubTable(index, row, $detail);
                console.log("展开子表")
                console.log("行数据：" + "index:" + index )
                console.log(row)
                initSubTable(index,row,$detail)
            }

        };
        $.table.init(options);
    });





</script>

<script>
    // 获得所有选中的数据
/*    function link() {
        // $.table.set();
        var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        console.log("已选择数据数量：" + rows.length)
        console.log("已选择数据" + rows.toString())
        let id = rows.toString();
        let url = ctx + 'baodao/demo02/add' + '?id=' + id;
        console.log("弹窗 url" + url)
        var result = url.replace(/#/g, '%23');
        $.modal.openTab("新增药品关系",result);
        // 关闭本窗口
        // var index = ctx + '/baodao/demo02';
        $.modal.close(prefix);
    }*/


</script>

<script type="text/javascript">
    //var ctx = "[[@{/}]]";
    var tjdata = [] ; // 推荐
    var zhdata = [] ; // 组合

    console.log("上下文：" + ctx)

    $('#tj-table').bootstrapTable({
      //  url: 'data1.json',
        columns: [

            {
            field: 'goodscode',
            title: '商品码'
        }, {
            field: 'goodsname',
            title: '商品名称'
        } ]
    });

    $('#zh-table').bootstrapTable({
        //  url: 'data1.json',
        columns: [{
            field: 'goodscode',
            title: '商品码'
        }, {
            field: 'goodsname',
            title: '商品名称'
        } ]
    });


    function tjButton() {
        // 将表格中勾选数据 放入推荐表格中
        var row  = $("#bootstrap-table").bootstrapTable('getSelections');

            let goodsCode = row[0].goodscode ;
            console.log("商品编码：" + goodsCode)
            for(var i = 0; i< tjdata.length; i++){
                console.log("已存在商品编码：" + tjdata[i].goodscode)
                if( tjdata[i].goodscode == goodsCode){
                    alert("模板中已存在此商品")
                    return;
                }

            }
      //  $('#tj-table').bootstrapTable.url = row[0];
       // $('#tj-table').bootstrapTable.url = {"goodsName":"测试"};
      //  $('#tj-table').bootstrapTable.url = row;
        if(tjdata.length >= 2){
            alert("推荐药品数量限制为2种")
        }
        else{

                tjdata.push(row[0])
                $('#tj-table').bootstrapTable('load', tjdata);
                $('#tj-table').bootstrapTable('refresh');
                console.log(row[0]);

        }

    }

    function zhButton() {
        // 将表格中勾选数据 放入组合表格中
        // 将表格中勾选数据 放入推荐表格中
        var row  = $("#bootstrap-table").bootstrapTable('getSelections');
        let goodsCode = row[0].goodscode ;
        console.log("商品编码：" + goodsCode)
        for(var i = 0; i< zhdata.length; i++){
            console.log("已存在商品编码：" + zhdata[i].goodscode)
            if( zhdata[i].goodscode == goodsCode){
                alert("模板中已存在此商品")
                return;
            }

        }
        //  $('#tj-table').bootstrapTable.url = row[0];
        // $('#tj-table').bootstrapTable.url = {"goodsName":"测试"};
        //  $('#tj-table').bootstrapTable.url = row;
        if(zhdata.length >= 2){
            alert("组合药品数量限制为2种")
        }else {
            zhdata.push(row[0])
            $('#zh-table').bootstrapTable('load', zhdata);
            $('#zhtable').bootstrapTable('refresh');
            console.log(row[0]);
        }
    }

    // 重置模板
    function resetTemplate() {
        tjdata.length = 0;
        zhdata.length = 0;
        $("#templateName").val('');
        $('#tj-table').bootstrapTable('load', tjdata);
        $('#zh-table').bootstrapTable('load', zhdata);
        $('#tj-table').bootstrapTable('refresh');
        $('#zh-table').bootstrapTable('refresh');

    }
    // 保存模板
    function  saveTemplate() {

      //  ctx = 'http://localhost:8005'
        console.log($("#templateName").val());
        if($("#templateName").val() == ''){
            alert("请输入模板名称")
        }else if(zhdata.length == 0 && tjdata.length == 0) {
            alert("模板无数据")
        }else {
            // alert("调用接口保存数据")
            console.log("调用接口保存数据:" + ctx);

            console.log("tjdata:" + tjdata);

            console.log("zhdata:" + zhdata);


            $.ajax({
              //  url: ctx + '/baodao/linktemplate/addTemplate',
                url: prefix2 + '/addTemplate',
                dataType: 'json',
                type: 'POST',
                data: {"templateName":$("#templateName").val(),"tjdata":JSON.stringify(tjdata),"zhdata":JSON.stringify(zhdata)},
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                },
                success: function(result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    $.operate.ajaxSuccess(result);

                    // 清空表单
                    resetTemplate();
                }
            })


        }
    }

    // 维护模板
    function  editTemplate() {
        var url = prefix2 + '/edit';
        // 跳转维护模板页面
        $.modal.openTab('药品关系模板维护',url);
    }

</script>
</body>
</html>